<template lang="pug">
div
  create-modal(
    :show.sync="show",
    :type="type",
    :user_id="user.id",
  )
  template(v-if="user")
    nav-div
    .flex.jsb.ae
      .flex.js.ae
        h1.ui.header(style="margin: 0 15px 0 0; padding: 0;") {{user.id}}
        h2.ui.header(style="margin: 0 15px 0 0; padding: 0;") {{user.name}}
      .flex.je.ae
        .ui.button(@click="createReportFn") 新建验光报告
        .ui.button(@click="createOrderFn") 新建订单
        //- .ui.button(v-if="['edit'].includes(mode)", @click="save") 保存
        //- .ui.button(v-if="['edit'].includes(mode)", @click="cancelOrder") 取消订单
        //- .ui.button.negative(v-if="['edit'].includes(mode)", @click="cancel") 取消
    .ui.divider
    .ui.grid
      .six.wide.column.border-right
        .ui.vertical.fluid.secondary.menu
          .ui.dropdown.item(v-bind:class="{ active: group === 0 }", @click="group = 0")
            i.dropdown.icon
            | 全部地址
          .ui.dropdown.item(v-bind:class="{ active: group === 1 }", @click="group = 1", v-link="{ name: 'reports', query: { user_id: user.id } }", target="_blank")
            i.dropdown.icon
            | 所有验光报告
          .ui.dropdown.item(v-bind:class="{ active: group === 2 }", @click="group = 2", v-link="{ name: 'orders', query: { user_id: user.id } }", target="_blank")
            i.dropdown.icon
            | 全部订单
      .ten.wide.column
        .ui.basic.clearing.segment
          template(v-if="group === 0")
            .ui.basic.clearing.segment
              address-select(
                style="margin: 0 0 10px 0;",
                :address.sync="address",
                :user_id="user.id",
              )
              .ui.form
                .three.fields
                  .field
                    input(type='text', v-model="address.name", placeholder="收货人")
                  .field
                    input(type='text', v-model="address.phone", placeholder="手机号")
                .three.fields
                  .field
                    input(type='text', v-model="address.province", placeholder="省")
                  .field
                    input(type='text', v-model="address.city", placeholder="市")
                  .field
                    input(type='text', v-model="address.district", placeholder="区")
                .field
                  input(type='text', v-model="address.street", placeholder="街道")
              .flex.js.ac(style="margin: 10px 0 0 0")
                .ui.button(@click="saveAddress") {{address.id ? '修改' : '新建'}}
                .ui.button.negative(v-if="address.id", @click="delAddress") 删除
                .ui.button.negative(v-if="address.id", @click="cancelAddress") 取消
          template(v-if="group === 1")
            .ui.basic.clearing.segment
              p 1
          template(v-if="group === 2")
            .ui.basic.clearing.segment
              p 1
</template>

<script>
import NavDiv from '../../modules/nav'
import AddressSelect from '../../modules/select/address'
import CreateModal from '../../modules/modal/create'
import { getUser, updateAddress, deleteAddress, createAddress } from '../../vuex/action'

export default {
  name: 'user',
  components: {
    NavDiv,
    AddressSelect,
    CreateModal,
  },
  vuex: {
    getters: {
      userSource: ({ user }) => user.user,
    },
    actions: {
      getUser,
      createAddress,
      deleteAddress,
      updateAddress,
    }
  },
  data () {
    return {
      user: null,
      group: 0,
      address: {
        id: null,
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        street:'',
      },
      type: null,
      show: false,
    }
  },
  methods: {
    createReportFn() {
      this.type = 'report'
      this.show = true
    },
    createOrderFn() {
      this.type = 'order'
      this.show = true
    },
    cancelAddress() {
      swalConfirm('确定要取消?', ()=>{
        this.address = {
          id: null,
          name: '',
          phone: '',
          province: '',
          city: '',
          district: '',
          street:'',
        }
      }, true)
    },
    delAddress() {
      swalConfirm('确定要删除?', ()=>{
        catchError(async () => {
          await this.deleteAddress(this.user.id, this.address)
          this.address = {
            id: null,
            name: '',
            phone: '',
            province: '',
            city: '',
            district: '',
            street:'',
          }
        }, '删除成功')
      }, true)
    },
    saveAddress(){
      catchError(async () => {
        if (this.address.id) {
          await this.updateAddress(this.user.id, this.address)
        } else {
          this.address.id = (await this.createAddress(this.user.id, this.address)).id
        }
      }, '保存成功')
    },
  },
  route: {
    data({ to: { params: { id }, query: { mode } } }) {
      catchError(async () => {
        await this.getUser(id)
        if (mode) {
          this.mode = mode
        }
      })
    }
  },
  ready () {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
  },
  watch: {
    userSource: {
      handler (val, old) {
        this.helper.title(`用户 ${val.name}`)
        this.user = _.cloneDeep(val)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
